import { View, Image, ScrollView, Text } from '@tarojs/components'
import React, { Component } from 'react';
import Taro, { Config,getCurrentInstance } from '@tarojs/taro';
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import dayjs from 'dayjs'
const redpacketImg = 'https://static3.jekunauto.com/img/others/redpacket-img2.png'
const baobeiBgImg = 'https://static3.jekunauto.com/img/others/baobei-bg.png'
import { getBaobeiDetails, getBaobeiData } from '@/api/redpacket'
import './index.scss'


interface State {
  tabIndex: number
  redpacketList: any
  redpacketInfo: any
  listLoaded: boolean
  allRedpacket: any
}

export default class Index extends Component {
	$instance = getCurrentInstance();
  constructor () {
    super(...arguments)
    this.state = {
      redpacketList: [],
      listLoaded: false,
      tabIndex: 1,
      redpacketInfo: {},
      allRedpacket: {}
    }
  }
  state: State
  UNSAFE_componentWillMount() { }
  componentDidMount() { }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() {
    getBaobeiData({
    }).then(res => {
      const data = res.data['data']
      this.setState({
        redpacketInfo: data
      })
    })
    getBaobeiData({
    }).then(res => {
      const data = res.data['data']
      this.setState({
        allRedpacket: data
      })
    })
    this.getBaobeiDetails()
  }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  getBaobeiDetails(params = { type: 1 }) {
    getBaobeiDetails(params).then(res => {
      const data = res.data['data'].map(v => {
        return {
          ...v,
          startAt: dayjs.unix(v.startAt).format('YYYY-MM-DD'),
          endAt: dayjs.unix(v.endAt).format('YYYY-MM-DD'),
        }
      })
      this.setState({
        listLoaded: true,
        redpacketList: data,
        tabIndex: params.type
      })
    })
  }

  tabData(i: number) {
    this.getBaobeiDetails({ type: i })
  }

  // 用户保呗明细界面
  userRedpacketView() {
    const {
      redpacketInfo,
      allRedpacket
    } = this.state
    return (

      <View className='redpacket-hd'>
        <Image className='baobeiBgImg' src={baobeiBgImg} mode="widthFix"></Image>
        <View className="redpacket-hd-model">
          <View className='redpacket-history' onClick={() => { Taro.navigateTo({ url: '/pages/redpacket/list/index?redPacketType=4' }) }}>
            <Iconfont size='38' color='#fff' name='icon-exclamation-circle-o'></Iconfont>
          </View>
          <View className='rule' onClick={() => { Taro.navigateTo({ url: '/pages/redpacket/rule/index?type=baobei' }) }}>
            保呗规则
            <Iconfont size='20' color='#fff' name='icon-jiantourukou'></Iconfont>
          </View>
          <View className='price-cont'>
            <View className='li'>
              <View className='num'>￥{redpacketInfo.remainValue}</View>
              <View className='text'>可用保呗</View>
            </View>
            <View className='li'>
              <View className='num'>￥{allRedpacket.originValue}</View>
              <View className='text'>保呗总额</View>
            </View>
          </View>
          <View className='tips'>保呗帮你省了{allRedpacket.saveValue}元</View>
        </View>
      </View>
    )
  }

  // 用户保呗类型列表
  userRedpacketListView() {
    const {
      redpacketList,
      listLoaded,
      tabIndex
    } = this.state
    return (
      <View className='redpacket-bd'>
        <ScrollView scrollY className='tab-cont'>

          <View className='tab-cont-item'>
            {
              listLoaded && redpacketList.map(list => {
                return (
                  <View key={list.id} className={classnames('tab-cont-item-li', tabIndex === 2 && 'grayscale')}>
                    {list.expireSoon && <View className='expireSoon-tips'>快过期</View>}
                    <Image className='img' src={redpacketImg}></Image>
                    <View className={classnames('cont')}>
                      <View className='price'>￥{list.remainValue}</View>
                      {tabIndex === 2 && <View className='text'>已过期</View>}
                      <View className='text'>{`${list.startAt}~${list.endAt}`}</View>
                    </View>
                  </View>
                )
              })
            }
          </View>
          <View className='scroll-bt-tips'>没有更多记录啦</View>
        </ScrollView>
      </View>
    )
  }

  render() {
    const {
      tabIndex
    } = this.state

    return (
      <View className='redpacket-index'>
        <View className='redpacket-fixed-top'>
          {this.userRedpacketView()}
          <View className='tab-item'>
            <View onClick={(e) => { this.tabData(1, e) }} className={classnames('tab-li', tabIndex === 1 && 'act')}><View className='tab-li-text'>可用保呗</View></View>
            <View onClick={(e) => { this.tabData(2, e) }} className={classnames('tab-li', tabIndex === 2 && 'act')}><View className='tab-li-text'>不可用保呗</View></View>
          </View>
        </View>
        {this.userRedpacketListView()}
      </View>
    )
  }

}
